<template>
  <div>
    <el-card shadow="never">
      <div class="dflex-b margin-top-sm">
        <div></div>
        <div class="dflex ">
          <el-input class="margin-right-xs"  placeholder="请输入昵称" clearable v-model="queryParams.kwd" ></el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <el-table :data="list">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="头像" prop="avatar" min-width="60px">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname"></el-table-column>
        <el-table-column label="账号" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email" min-width="100px"></el-table-column>
        <el-table-column label="注册时间" prop="createTime" min-width="100px">
          <template slot-scope="scope">{{ scope.row.createTime|dateFormat }}</template>
        </el-table-column>
        <el-table-column label="最近登录" prop="loginTime">
          <template slot-scope="scope">
            {{ scope.row.lastLoginTime == null ? scope.row.createTime : scope.row.lastLoginTime | dateFormat3 }}
          </template>
        </el-table-column>
        <el-table-column label="角色" min-width="100px">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='0'">普通用户</div>
            <div v-else-if="scope.row.type=='1'">管理员</div>
            <div v-else-if="scope.row.type=='2'">超级管理员</div>
          </template>
        </el-table-column>
        <el-table-column label="管理员" min-width="70px">
          <template slot-scope="scope">
            <el-switch active-value="1" inactive-value="0" v-model="scope.row.manageType"
                       :disabled="userInfo.id== scope.row.id || scope.row.type == 2"
                       @change="handleChangeType(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="70px">
          <template slot-scope="scope">
            <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.status"
                       :disabled="userInfo.id== scope.row.id || scope.row.type == 2"
                       @change="handleChangeStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary"
                       @click="handleEditUser(scope.row)">编辑
            </el-button>
            <el-button size="mini" circle type="danger" icon="el-icon-delete"
                       @click="handleDelUser(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :total="total">
      </el-pagination>
    </el-card>
  </div>

</template>

<script>
import { mapState } from 'vuex'
import { reqEditUser, reqDelUser, reqUserList } from '@/api/adminApi'

const defQuery = () => {
  return {
    kwd: '',
    typeId: null,
    tagId: null,
    pageNum: 1,
    pageSize: 10
  }
}
export default {
  data() {
    return {
      queryParams: defQuery(),
      list: [],
      total: 0
    }
  },
  computed: {
    ...mapState('user', [
      'userInfo',
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      reqUserList(this.queryParams).then(data => {
        this.list = data.list.map(it => {
          it.manageType = it.type == "0" ? "0" : "1"
          return it
        })
        this.total = data.total
      })
    },
    handleSearch() {
      this.getList()
    },
    // 修改用户权限
    handleChangeStatus(row) {
      reqEditUser({
       status:row.status
      }).then(data => {
        this.$message.success("修改权限成功")
      })
    },
    handleChangeType(row) {
      reqEditUser({type:row.type}).then(data => {
        this.$message.success("修改权限成功")
      })
    },
    handleEditUser(item) {

    },
    // 删除用户
    handleDelUser(id) {
      this.$confirm(
          '此操作将永久删除该用户, 是否继续',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        reqDelUser(id).then(data => {
          this.$message.success('删除用户成功！')
          this.getList()
        })
      })
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
  }
}
</script>

<style scoped lang="less">

</style>
